<template>
	<el-dialog
	  :visible.sync="state.visible"
	  :fullscreen="fullscreen"
	  :custom-class="!fullscreen ? 'custom-height': 'custom-fullscreen'"
	  :close-on-click-modal="false"
	  :show-close="false"
	  @closed="close"
	>
		<el-row slot="title" type="flex">
			<el-col :span="20">{{ title }}</el-col>
			<el-col :span="4" style="text-align: right">
				<svg-icon
				  :icon-class="!fullscreen ? 'fullscreen': 'exit-fullscreen'"
				  style="cursor: pointer; margin-right: 10px"
				  @click="() => {fullscreen = !fullscreen}"
				/>
				<i class="el-icon-close" style="cursor: pointer" @click="close" />
			</el-col>
		</el-row>
		<el-form ref="dataForm" :model="form" label-position="right" label-width="100px">
  <el-row :gutter="18">
    <el-col :span="24">
        <el-form-item
          label="供应商"
        >
          <el-select
            filterable
            placeholder="请选择供应商"
            v-model="form.supplierId"
            @change="changeCustomer"
          >
            <el-option
              value=""
              label="-- 请选择 --"
            />
            <el-option
              v-for="(item, index) in more.supplierOptions"
              :key="index"
              :value="`${item.value}`"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    <el-col :span="24">
        <el-form-item
          label="应收账款"
        >
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%; height: 600rpx;"
          
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="订单号"
            width="120">
            <template slot-scope="scope">{{ scope.row.procurementOrderId }}</template>
          </el-table-column>
          <el-table-column
            prop="amount"
            label="金额"
            width="120">
          </el-table-column>
          <!-- <el-table-column
            label="单位"
            width="120">
            <template slot-scope="scope">{{ scope.row.unitName }}</template>
          </el-table-column> -->
          <!-- <el-table-column
            prop="status"
            label="状态"
            width="120">
          </el-table-column> -->
        </el-table>

        </el-form-item>
      </el-col>
      <el-col :span="24">
		<el-form-item
		  label="备注"
		>
		<el-input
		  v-model="form.note"
		  controls-position="right"
		  placeholder="请输入备注"
		/>
		</el-form-item>
	  </el-col>
	  
      
  </el-row>
  </el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="close">
				取消
			</el-button>
			<el-button type="primary" :loading="state.confirmSubmit" :disabled="state.confirmSubmit" @click="onSubmit(false)">
				确定
			</el-button>
		</div>
	</el-dialog>
  </template>
  
  <script>
  import { dibootApi } from '@/utils/request'
  import form from '@/components/diboot/mixins/form'
  export default {
    name: 'financePayForm',
    mixins: [form],
    components: {
    },
    data() {
      return {
        tableData: [],
        storeroom: [],
        shelves: [],
        baseApi: '/financePay',
        
        attachMoreList: [
            {
              target: 'orders',
              label: 'id',
              value: 'id'
            },
            {
              target: 'iamUser',
              label: 'realname',
              value: 'id'
            },
            {
              target: 'stockStatus'
            },
            {
              target: 'supplier',
              label: 'name',
              value: 'id'
            }
          ],

      }
    },
    props: {

      procurementOrderId: {
        type: String,
        required: true
      },
      procurementOrderItemId: {
        type: String,
        required: true
      },
      unitId: {
        type: String,
        required: true
      }
    },
    methods: {
      async changeCustomer(value) {
        this.form.supplierId = value
        const res2 = await dibootApi.get(`/financePayable/list?supplierId=${value}&status=1`)
        if (res2.code === 0) {
          this.tableData = res2.data
        }
      },
      handleSelectionChange(val) {
        this.form.multipleSelection = val;
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  </style>
  